<template>
	<view class="content">
		<view class="content-top-bg" :style="{'backgroundColor': vdata.primaryColor}"></view>
		<view class="payment">
			<view class="payment-mchName" @tap="advancedFunc">付款给{{ vdata.payOrderInfo.mchName }}</view>
			<view class="payment-divider"></view>
			<view class="payment-amountTips">付款金额：</view>
			<view class="payment-amount" :style="{'color': vdata.primaryColor}">
				<text class="payment-amount-rmb">￥</text>
				<text class="payment-amount-value">{{ doubleToThousands(vdata.amount) }}</text>
			</view>
		</view>
		<view class="payment-keyboard" v-if="!vdata.payOrderInfo['fixedFlag']">
			<text class="buyer-remark" v-if="!vdata.buyerRemark" :style="{'color': vdata.primaryColor}" @tap="showRemarkModel">添加备注</text>
			<text class="buyer-remark" v-else @tap="showRemarkModel">
				{{ vdata.buyerRemark }}
				<text :style="{'color': vdata.primaryColor, 'padding-left': '6rpx'}">修改</text>
			</text>
			<jq-keyboard
				ref="jqKeyboardRef"
				:primaryColor="vdata.primaryColor"
				@change="onChange"
				@pay="pay">
			</jq-keyboard>
		</view>
		<view v-else class="payment-no-keyboard" :style="{'backgroundColor': vdata.primaryColor}" @tap="pay">付 款</view>
		
		<view v-if="vdata.remarkVisible" class="remark-model">
			<view class="remark-content">
				<text class="remark-content-title" :style="{'color': vdata.primaryColor}">添加备注</text>
				<input v-model="vdata.modelRemark" :focus="vdata.remarkVisible" maxlength="20" placeholder="最多输入12个字" class="remark-content-body" />
				<view class="remark-content-btn">
					<text class="btn-cancel" @tap.stop="closeRemarkModel">取消</text>
					<text class="btn-confirm" :style="{'backgroundColor': vdata.primaryColor, 'borderColor': vdata.primaryColor}" @tap.stop="confirmRemark">确认</text>
				</view> 
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { $getPayOrderInfo, $getPayPackage } from '@/http/apiManager.js'
import { doubleToThousands } from '@/util/amount.js'
import { toErrPageFunc } from '@/util/toErrorPageUtil.js'
import appConfig from '@/config/appConfig.js'
import theme from '@/config/theme.js'
import paywayCallFunc from '@/pages/payway/payway.js'

const jqKeyboardRef = ref()
	
const vdata = reactive({
	primaryColor: '',
	amount: '0',
	buyerRemark: '', // 买家备注
	modelRemark: '', // 弹层显示备注
	remarkVisible: false,
	doubleToThousands: doubleToThousands(),
	payOrderInfo: {},
	clearStorageFlag: 0, //显示清空缓存的提示
}) as any

onLoad(() => {
	
	vdata.amount = '0'
	
	vdata.primaryColor = theme.changeColors()
	
	// #ifdef H5
		//解决H5的刷新问题
		if(!appConfig.tokenValue){ // 不存在  则需要跳转到首页再次放置 获取userID等信息。 
		
		    window.location.href = '/cashier/pages/hub/default?' + appConfig.tokenKey + "=" + window.sessionStorage.getItem(appConfig.tokenKey)
			return false;
		}
	// #endif
	
	// 获取订单信息
	getOrderInfo()
	
})

// 输入金额
function onChange(e: any) {
	vdata.amount = e
}
// 获取订单信息
function getOrderInfo() {
	$getPayOrderInfo().then(({bizData}) => {
		
		vdata.payOrderInfo = bizData
		
		if(bizData.amount) {
			vdata.amount = (bizData.amount/100).toString()
			
		}
		
		// 金额传入键盘组件
		jqKeyboardRef.value.setValue(vdata.amount)
		
		// 如果订单已支付，则转到提示页面
		if(bizData.state && bizData.state === 2) {
			return toErrPageFunc("订单已支付");
		}
		
		// 自动调起支付
		if(bizData.autoPay) {
			pay()
		}
	}).catch(err => {
        console.log(err);
    })
}

// 发起支付
function pay() {
	vdata.payOrderInfo.amount = vdata.amount
	
	if(vdata.amount <= 0) {
		return uni.showToast({
			title: '金额必须大于0',
			icon: 'none'
		})
	}
	
	uni.showLoading({
		title: '请稍等...',
		mask: true
	})
	$getPayPackage(vdata.amount, vdata.buyerRemark).then( ({bizData}) => {
		uni.hideLoading()
		
		 //订单创建异常
		if(bizData.code != '0') {
		  return toErrPageFunc(bizData.msg);
		}
		
		// 订单响应结果
		let orderRes = bizData.data;

		if(orderRes.orderState != 1 ) { //订单不是支付中，说明订单异常
		  return toErrPageFunc(orderRes.errMsg);
		}

		if(orderRes.payUrl){
		  location.href = orderRes.payUrl;
		  return false;
		}
		
		// 以下为调起 jsapi的函数：  分为： H5 和 各端小程序
		let thisPaywayCallFunc = paywayCallFunc()[appConfig.currentPageType];
		thisPaywayCallFunc(orderRes, vdata.payOrderInfo);
	}).catch( () => {
		uni.hideLoading()
	})
	
}

// 显示备注弹窗
function showRemarkModel() {
	vdata.modelRemark = vdata.buyerRemark
	vdata.remarkVisible = true 
}

// 备注弹窗确认
function confirmRemark() {
	vdata.buyerRemark = vdata.modelRemark
	vdata.remarkVisible = false
}

// 关闭备注弹窗
function closeRemarkModel() {
	vdata.modelRemark = ''
	vdata.remarkVisible = false
}

// 高级功能模块的显示
function advancedFunc(){
	
	vdata.clearStorageFlag = vdata.clearStorageFlag + 1
	
	if(vdata.clearStorageFlag >= 10){
		vdata.clearStorageFlag = 0
		
		// 目前仅清空缓存
		uni.showModal({
			title: '确认清除缓存？',
			success: function(r) {
				if (r.confirm) {
					uni.clearStorageSync()
					return uni.showToast({title: '已清空'})
				}
			}
		});
	}
	
}


</script>

<style lang="scss">
	.remark-model {
		position: fixed;
		height: 100vh;
		width: 100vw;
		z-index: 20;
		background-color: rgba(0,0,0,0.6);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		.remark-content {
			height: 290rpx;
			width: 600rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 50rpx 0 20rpx 0;
			
			.remark-content-title {
				font-weight: bold;
				font-size: 33rpx;
				letter-spacing: 0.05em;
				margin-left: 50rpx;
			}
			
			.remark-content-body {
				margin-left: 50rpx;
			}
			
			.remark-content-btn {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				margin-left: 20rpx;
				
				text {
					width: 230rpx;
					height: 90rpx;
					border-radius: 10rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
				
				.btn-cancel{
					background: #fff;
					border: 1rpx solid #c5c7cc;
					font-weight: 500;
					font-size: 30rpx;
					letter-spacing: 0.07em;
					color: #808080;
				}
				
				.btn-confirm{
					border: 3rpx solid #0041c4;
					font-weight: 500;
					font-size: 30rpx;
					letter-spacing: 0.07em;
					color: #fff;
				}
			}
		}
	}
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
		 
		.content-top-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 212rpx;
			border-radius: 0 0 30rpx 30rpx;
			z-index: 0;
		}
	}
	
	.payment {
		position: relative;
		width: 650rpx;
		height: 321rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
		background: #fff;
		z-index: 1;
		display: flex;
		flex-direction: column;
		
		.payment-mchName {
			width: 100%;
			height: 105rpx;
			font-size: 30rpx;
			letter-spacing: 0.04em;
			padding-left: 30rpx;
			color: #000;
			display: flex;
			align-items: center;
		}
		.payment-divider {
			height: 1rpx;
			width: 100%;
			background-color: $uni-bg-color-grey;
		}
		.payment-amountTips {
			font-size: 25rpx;
			letter-spacing: 0.04em;
			text-align: left;
			padding: 30rpx 0 0 40rpx;
			color: rgba(0, 0, 0, 0.6);
		}
		.payment-amount {
			padding: 15rpx 0 0 40rpx;
			
			.payment-amount-value {
				font-size: 80rpx;
				letter-spacing: 0.03em;
				padding-left: 15rpx;
			}
		}
	}
	.payment-keyboard {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 5;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		
		.buyer-remark {
			position: absolute;
			top : -80rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
	}
	.payment-no-keyboard {
		width: 80%;
		height: 88rpx;
		position: fixed;
		left: 10%;
		right: 10%;
		bottom: 240rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: $uni-text-color-inverse;
		border-radius: 8rpx;
	}
</style>
